/**
 * yufp-template-selector
 * 数据权限模板选择器
 * chenlin
 */
(function (vue, $, name) {
  vue.component(name, {
    template: '<div>\
            <el-input v-model="selectedVal" readonly :placeholder="placeholder" :disabled="disabled"\
            :size="size" :name="name" :icon="icon" :on-icon-click="onIconClickFn" @click.native="clickFn">\
            </el-input>\
            <el-dialog-x :center="true" :title="$t(\'widgets.tempSele_temp_001\')" :visible.sync="dialogVisible" height="350px" width="850px">\
              <el-table-x ref="mytable" :data-url="dataUrl" @row-click="rowClickFn"\
               :table-columns="tableColumns" :max-height="300">\
              </el-table-x>\
              <div slot="footer" class="dialog-footer">\
                <el-button @click="dialogVisible = false">{{$t(\'widgets.btn_cancel\')}}</el-button>\
                <el-button type="primary" @click="confirmFn">{{$t(\'widgets.btn_confirm\')}}</el-button>\
              </div>\
            </el-dialog-x>\
          </div>',

    props: {
      // 下述字段为el-input组件中部分属性，配置文档参见element-ui
      name: {
        type: String
      },
      value: {
        required: true
      },
      rawValue: String,
      size: String,
      disabled: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: 'search'
      },
      params: Object
    },

    data: function () {
      return {
        selectedVal: '',
        dialogVisible: false,
        dataUrl: backend.appOcaService + '/api/adminsmdataauthtmpl/',
        tableColumns: [
          { label: this.$t('widgets.tempSele_col_001'), prop: 'authTmplName', width: 150, sortable: true, resizable: true },
          { label: this.$t('widgets.tempSele_col_002'), prop: 'sqlName', width: 150 },
          { label: this.$t('widgets.tempSele_col_003'), prop: 'sqlString', width: 200 },
          { label: this.$t('widgets.tempSele_col_004'), prop: 'lastChgUsr', width: 100 },
          { label: this.$t('widgets.tempSele_col_005'), prop: 'lastChgDt', width: 100 }
        ]
      };
    },
    methods: {
      clickFn: function () {
        this.$emit('click-fn', this);
      },
      onIconClickFn: function (val) {
        if (this.disabled) {
          return;
        }
        this.dialogVisible = true;
      },
      rowClickFn: function (row) {
        this.selections = this.$refs.mytable.selections;
      },
      confirmFn: function () {
        if (this.selections.length < 1) {
          this.$message(this.$t('widgets.selector_msg_001'));
        }
        this.selectedVal = this.selections[0].authTmplName;
        this.$emit('input', this.selections[0].authTmplId);
        // 这个是你自定义返回的接口事件
        this.$emit('select-fn', this.selections[0].authTmplId, this.selections[0]);
        this.dialogVisible = false;
      },
      // 对外提供选择器显示值
      getRawValue: function () {
        return this.selectedVal;
      },
      convertKey: function (val) {
        // 将key转换为对应的value值
        return val;
      }

    },
    mounted: function () {
      this.selectedVal = this.rawValue ? this.rawValue : '';
    },
    watch: {
      value: function (val) {
        // 将key转换为对应的value值
        this.selectedVal = this.selectedVal ? this.selectedVal : val;
      },
      rawValue: function (val) {
        this.selectedVal = val;
      }
    }

  });
}(Vue, yufp.$, 'yufp-template-selector'));


